<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack" :style="{ marginTop: safeTop + 'px' }">
				<image src="/static/base/back.svg" class="back-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">所有点赞</view>
			<view class="header-right"></view>
		</view>

		<scroll-view scroll-y class="content">
			<view :style="{ height: contentTop + 'px' }"></view>

			<!-- 点赞列表 -->
			<view class="like-list">
				<view v-for="item in likes" :key="item.id" class="like-item" @click="goToWorkDetail(item.work_id,item.work_type)">
					<!-- 头像区域 -->
					<view class="avatar-container">
						<image :src="item.avatar || '/static/default-avatar.png'" class="user-avatar"
							mode="aspectFill" />
						<image v-if="item.identity==1" :src="'/static/base/user-center/level/'+levelImg(item.work_level)" class="vip-badge"
							mode="aspectFit" />
					</view>

					<!-- 中间内容区域 -->
					<view class="like-content">
						<view class="user-info">
							<text class="user-name">{{ item.nickname || '匿名用户' }}</text>
							<text class="designer-tag" v-if="item.identity==2">
								<image class="designer-icon" src="/static/base/index/write.png"></image>
								设计师</text>
						</view>
						<text class="interaction-type">赞了你的作品</text>
					</view>

					<view style="text-align: right;">
						<text class="like-time">{{ formatDate(item.add_time) }}</text>
						<!-- 作品封面 -->
						<view class="work-cover">
							<image :src="item.work_images || '/static/default-work.png'" class="cover-image"
								mode="aspectFill" />
						</view>
					</view>
				</view>
			</view>

			<view style="height: 83.6rpx;"></view>

			<!-- 空状态 -->
			<view v-if="likes.length === 0 && !loading" class="empty-state">
				<!-- <image src="/static/base/empty.png" class="empty-icon" mode="aspectFit" /> -->
				<image :src="imgHost + '/statics/images/no-thing.png'"></image>
				<view class="empty-text">暂无点赞消息</view>
			</view>
		</scroll-view>

		<!-- 底部TabBar -->
		<TableBar :current="2" />
	</view>
</template>

<script>
	import TableBar from '@/components/base/table-bar/Index.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		getMessageList,
		readMessage
	} from '@/api/base/message.js'
	export default {
		components: {
			TableBar
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				safeTop: 0,
				contentTop: 0,
				likes: [],
				loading: false
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '所有点赞'
			})

			const {
				barTop
			} = this.$util.getWXStatusHeight()
			this.safeTop = barTop
			this.contentTop = barTop + 40

			this.fetchMessageList()
		},
		onShow(){
			this.clearUnread()
		},
		methods: {
			levelImg(work_level) {
				const map = ['', '1.png', '2.png', '3.png', '4.png', '5.png'];
				return map[work_level];
			},
			clearUnread() {
				readMessage(1, 2).then(res => {
					if (res.status === 200) {
						console.log('标记消息已读成功')
					} else {
						console.log('标记消息已读失败', res.msg)
						uni.showToast({
							title: res.msg || '清除失败',
							icon: 'error'
						})
					}
				}).catch(err => {
					console.log('标记消息已读失败', err)
					uni.showToast({
						title: err || '清除失败',
						icon: 'error'
					})
				})
			},
			// 判断是否为 VIP（根据 identity 字段，假设 1 为 VIP）
			isVip(identity) {
				return identity === 1
			},

			// 格式化时间（假设 add_time 是 YYYY-MM-DD HH:mm:ss 或类似格式）
			formatDate(timeStr) {
				if (!timeStr) return ''
				const date = new Date(timeStr)
				const year = date.getFullYear().toString().slice(-2)
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},

			async fetchMessageList() {
				this.loading = true
				try {
					const res = await getMessageList(1, 1, 100)
					if (res.status === 200 && res.data?.list) {
						this.likes = res.data.list
					} else {
						uni.showToast({
							title: res.msg || '获取失败',
							icon: 'none'
						})
						console.warn('获取点赞列表失败:', res.msg)
						this.likes = []
					}
				} catch (error) {
					console.error('请求异常:', error)
					this.likes = []
					uni.showToast({
						title: error,
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			goBack() {
				uni.navigateBack()
			},

			goToWorkDetail(workId,workType) {
				if (!workId) return
				uni.navigateTo({
					url: `/pages/sub_base/creative-detail/index?id=${workId}&workType=${workType}`
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F2F8FC;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 33.4rpx;
		z-index: 100;
	}

	.header-left {
		width: 92.0rpx;
		height: 92.0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		margin-left: -35rpx;
		width: 50.2rpx;
		height: 50.2rpx;
	}

	.header-title {
		font-size: 37.6rpx;
		font-weight: 600;
		color: #333333;
	}

	.header-right {
		width: 92.0rpx;
	}

	.content {
		height: calc(100vh - 83.6rpx);
	}

	.like-list {
		overflow: hidden;
	}

	.like-item {
		display: flex;
		padding: 10.5rpx 25.1rpx;
		border-bottom: 2.1rpx solid #dedede;
		align-items: center;
	}

	.like-item:last-child {
		border-bottom: none;
	}

	.avatar-container {
		position: relative;
		width: 83.6rpx;
		height: 83.6rpx;
	}

	.user-avatar {
		width: 83.6rpx;
		height: 83.6rpx;
		border-radius: 41.8rpx;
	}

	.vip-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 29.3rpx;
		height: 29.3rpx;
	}

	.like-content {
		flex: 1;
		padding: 0 25.1rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.user-name {
		font-size: 25.1rpx;
		font-weight: 600;
		color: #333333;
		margin-right: 12.5rpx;
	}

	.interaction-type {
		font-size: 22.0rpx;
		color: #666666;
		margin-right: 12.5rpx;
	}

	.like-time {
		font-size: 23.0rpx;
		color: #999999;
	}

	.work-cover {
		width: 167.2rpx;
		height: 167.2rpx;
		overflow: hidden;
	}

	.cover-image {
		width: 100%;
		height: 100%;
	}

	.empty-state {
		text-align: center;
		padding: 125.4rpx 41.8rpx;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		/* margin-bottom: 33.4rpx; */
	}

	.empty-text {
		font-size: 33.4rpx;
		color: #999999;
	}
	
	
	.designer-tag {
		display: flex;
		align-items: center;
		/* 保持原有样式 */
		font-size: 24rpx;
		padding: 0 14rpx 8rpx;
		/* 可根据需要调整 */
		margin-left: 24rpx;
		margin-top: 4rpx;
		border-radius: 30rpx;
		border: 2rpx solid #000;
		height: 44rpx;
	
		/* 新增：设置背景色和文字颜色，使其更清晰 */
		background-color: #fff;
		/* 或者透明 background-color: transparent; */
		color: #000;
	}
	.designer-icon {
		width: 22rpx;
		height: 22rpx;
		margin-right: 4rpx;
		/* 调整图标和文字之间的间距 */
		/* 如果需要垂直居中，可以加 margin-bottom: -2rpx; */
	}
</style>